<template>
  <div id="nav">
    <!-- <router-link to="/">热门</router-link>
    <router-link to="/daogou">导购</router-link>
    <router-link to="/ceping">评测</router-link>
    <router-link to="/rank">排行榜</router-link>-->
  </div>
  <header class="box-shadow-3">
    <div class="space-between">
      <div></div>
      <Header></Header>
      <div></div>
    </div>
    <!-- <teleport to="#app"> -->
      
  <el-affix :offset="80">
    <NavBar></NavBar>
  </el-affix>
    <!-- </teleport> -->
  </header>

  <main>
    <router-view />
  </main>
</template>

<script>
import NavBar from "@/components/NavBar";
import Header from "@/components/Header";
export default {
  components: {
    NavBar,
    Header,
  },
};
</script>

<style lang="scss">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  border: 0;
  background: transparent;
}
body {
  background-color: #ffffff;
}
#app {
  // font-family: Avenir, Helvetica, Arial, sans-serif;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100vw;
  // margin-left: calc(100vw - 100%);
}
header {
  overflow: visible;
}
.space-between {
  display: flex;
  justify-content: space-between;
}
.flex-colum {
  flex-direction: column;
}
main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 40px;
}
a {
  text-decoration: none;
}
.box-shadow-3 {
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.06);
}
</style>
